<!DOCTYPE html>
<html>
<head>
    <title>m-V Graph</title>
</head>
<body>
    <canvas id="myCanvas" width="550" height="520"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // Define coordinate system parameters
        const ox = 60;
        const oy = 470;
        const scaleX = 80; // pixels per cm³
        const scaleY = 80; // pixels per g
        const gridCellSize = 40;
        const gridWidth = 10 * gridCellSize;
        const gridHeight = 10 * gridCellSize;

        // Function to transform data coordinates to canvas coordinates
        function toCanvasX(vx) {
            return ox + vx * scaleX;
        }

        function toCanvasY(my) {
            return oy - my * scaleY;
        }

        // Draw grid
        ctx.beginPath();
        ctx.strokeStyle = '#cccccc';
        ctx.lineWidth = 1;
        // Horizontal grid lines
        for (let i = 1; i <= 10; i++) {
            ctx.moveTo(ox, oy - i * gridCellSize);
            ctx.lineTo(ox + gridWidth, oy - i * gridCellSize);
        }
        // Vertical grid lines
        for (let i = 1; i <= 10; i++) {
            ctx.moveTo(ox + i * gridCellSize, oy);
            ctx.lineTo(ox + i * gridCellSize, oy - gridHeight);
        }
        ctx.stroke();

        // Draw axes
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        // Y-axis
        ctx.moveTo(ox, oy);
        ctx.lineTo(ox, oy - gridHeight - 20);
        // Arrowhead for Y-axis
        ctx.moveTo(ox, oy - gridHeight - 20);
        ctx.lineTo(ox - 5, oy - gridHeight - 10);
        ctx.moveTo(ox, oy - gridHeight - 20);
        ctx.lineTo(ox + 5, oy - gridHeight - 10);
        // X-axis
        ctx.moveTo(ox, oy);
        ctx.lineTo(ox + gridWidth + 20, oy);
        // Arrowhead for X-axis
        ctx.moveTo(ox + gridWidth + 20, oy);
        ctx.lineTo(ox + gridWidth + 10, oy - 5);
        ctx.moveTo(ox + gridWidth + 20, oy);
        ctx.lineTo(ox + gridWidth + 10, oy + 5);
        ctx.stroke();

        // Draw axis labels and ticks
        ctx.fillStyle = 'black';
        // Y-axis labels
        ctx.font = '20px Times New Roman';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        for (let i = 0; i <= 4; i++) {
            ctx.fillText(i, ox - 10, toCanvasY(i));
        }
        // X-axis labels
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        for (let i = 1; i <= 5; i++) {
            ctx.fillText(i, toCanvasX(i), oy + 10);
        }
        
        // Axis titles
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('m/g', ox + 15, oy - gridHeight - 25);
        ctx.fillText('V/cm³', ox + gridWidth + 30, oy - 2);


        // Draw the data lines
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // Line a: from (0,0) to (2.5, 5)
        let endX_a = toCanvasX(2.5);
        let endY_a = toCanvasY(5);
        ctx.moveTo(ox, oy);
        ctx.lineTo(endX_a, endY_a);

        // Line b: from (0,0) to (4.5, 4.5)
        let endX_b = toCanvasX(4.5);
        let endY_b = toCanvasY(4.5);
        ctx.moveTo(ox, oy);
        ctx.lineTo(endX_b, endY_b);

        // Line c: from (0,0) to (5, 2.5)
        let endX_c = toCanvasX(5);
        let endY_c = toCanvasY(2.5);
        ctx.moveTo(ox, oy);
        ctx.lineTo(endX_c, endY_c);
        
        ctx.stroke();

        // Add labels 'a', 'b', 'c'
        ctx.font = 'italic 22px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('a', endX_a, endY_a - 5);
        ctx.fillText('b', endX_b, endY_b - 10);

        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('c', endX_c + 5, endY_c);

    </script>
</body>
</html>